
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <#assign path="${springMacroRequestContext.getContextPath()}">
    <link rel="stylesheet" href="${path}/layui/css/layui.css">
    <style>
        .j{
            height: 725px;
            width: 100%;
            overflow: hidden;
        }
        .hz1{
            height: 665px;
            width: 200px;
            background-color: #393D49;
            float: left;
        }
        .hz1_1{
            height: 665px;
            width: 1319.2px;
            float: right;
            overflow: hidden;
        }
        .layui-form{
            margin: 0;
        }
    </style>
</head>
<body>

<div class="hz">
    <ul class="layui-nav">
        <li class="layui-nav-item">
            <a href="">控制台<span class="layui-badge">9</span></a>
        </li>
        <li class="layui-nav-item">
            <a href="">个人中心<span class="layui-badge-dot"></span></a>
        </li>
        <li class="layui-nav-item" lay-unselect="">
            <a href="javascript:;"><img src="//t.cn/RCzsdCq" class="layui-nav-img">我</a>
            <dl class="layui-nav-child">
                <dd><a href="javascript:;">修改信息</a></dd>
                <dd><a href="javascript:;">安全管理</a></dd>
                <dd><a href="javascript:;">退了</a></dd>
            </dl>
        </li>
    </ul>
    <div class="hz1">
        <ul class="layui-nav layui-nav-tree layui-bg-cyan layui-inline" lay-filter="demo">
            <li class="layui-nav-item"><a href="">首页</a></li>
            <li class="layui-nav-item layui-nav-itemed">
                <a href="javascript:;">商品信息</a>
                <dl class="layui-nav-child">
                    <dd><a href="/type/list.html">商品类型</a></dd>
                    <dd><a href="/model/list.html">商品价格</a></dd>
                    <dd><a href="/order/list.html">订单</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:;">用户信息</a>
                <dl class="layui-nav-child">
                    <dd><a href="/user/list.html">用户账户后台数据</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="">云市场</a></li>
            <li class="layui-nav-item"><a href="">社区</a></li>
        </ul>
    </div>
    <!--数据表-->
    <div class="hz1_1">
        <table class="layui-hide" id="order" lay-filter="test"></table>
        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
                <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
                <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
                <button class="layui-btn layui-btn-sm" lay-event="insert">新增</button>
            </div>
        </script>

        <script type="text/html" id="barDemo">
            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        </script>
    </div>
</div>

<script src="${path}/layui/layui.js"></script>
<script>
    layui.use('element', function(){
        var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块

        //监听导航点击
        element.on('nav(demo)', function(elem){
            //console.log(elem)
            layer.msg(elem.text());
        });
    });
    layui.use('table', function(){
        var table = layui.table;
        var  $=layui.$;//得到jquery
        //渲染table
        var tableId=table.render({
            elem: '#order'
            ,url:'/order/'//转到category查询所有的方法/api
            ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示'
                ,layEvent: 'LAYTABLE_TIPS'
                ,icon: 'layui-icon-tips'
            }]
            ,parseData: function(res){ //res 即为原始返回的数据
                return {
                    "code": res.status, //解析接口状态
                    "msg":res.msg,
                    "count":res.total,
                    "data": res.data//解析数据列表
                }}
            ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,cols: [[
                {type: 'checkbox', fixed: 'left'},//勾选框固定在最左侧
                // {field:'id', width:80, title: '编号', sort: true}
                {field:'customer', width:58, title: '客户'}
                ,{field:'createTime', width:280, title: '创造时间', sort: true,
                    templet:"<div>{{layui.util.toDateString(d.updateTime,'yyyy-MM-dd')}}</div>"
                }
                ,{field:'updateTime', width:280, title: '更新时间', sort: true,
                    templet:"<div>{{layui.util.toDateString(d.updateTime,'yyyy-MM-dd')}}</div>"
                }
            ]]
        });
        //头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：'+ data.length + ' 个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选': '未全选');
                    break;

                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;
            };
        });
    })
</script>

</body>
</html>
